<template>
  <div class="chart">
    <div class="pie" ref="pie"></div>
    <div class="showCenterText">
      <div class="centerText left">
        流入<br/>
        <span>{{pieChartData.sumIn | numOfLg}}</span><span>{{pieChartData.sumIn | textOfLg}}</span>
      </div>
      <div class="centerText right">
        流出<br/>
        <span>{{pieChartData.sumOut | numOfLg }}</span><span>{{ pieChartData.sumOut | textOfLg }}</span>
      </div>
    </div>
    <div class="pie-update-time"><span>数据截至</span><b>{{pieChartUpdateTime}}</b></div>
  </div>
</template>
<script>
  import echarts from 'echarts/lib/echarts';
  import 'echarts/lib/component/title';
  import { numOfLg, textOfLg } from '@/filters/legendFormat'
  export default{
    data() {
      return {
        pieChartUpdateTime: `    -  -     :  `
      }
    },
    props: {
      pieChartData: ''
    },
    filters: {
      numOfLg, textOfLg
    },
    mounted() {
      this.myChart = echarts.init(this.$refs.pie);
    },
    watch: {
      pieChartData: function(val) {
        this.pieChartUpdateTime = val.pieChartUpdateTime
        const startAngle = parseFloat(val.sumOut) / (parseFloat(val.sumOut) + parseFloat(val.sumIn)) * 180;

        let pieOptions = {
//          tooltip: {
//            trigger: 'item',
//            formatter: (params) => {
//              return `${params.seriesName}<br/>${params.name} : ${numOfLg(params.value)}${textOfLg(params.value)} (${params.percent}%)`
//            }
//          },
          title: {
            text: val.sumIn - val.sumOut > 0 ? '今日净流入' : '今日净流出',
            textStyle: {
              color: '#222',
              fontSize: 16,
              fontWeight: 500,
              fontFamily: 'PingFangSC'
            },
            subtext: `${numOfLg(Math.abs(val.sumIn - val.sumOut))}${textOfLg(Math.abs(val.sumIn - val.sumOut))}`,
            subtextStyle: {
              color: val.sumIn - val.sumOut > 0 ? '#eb333b' : '#1AAE52',
              fontFamily: 'Helvetica',
              fontSize: 14
            },
            x: 'center',
            y: '33%'
          },
          color: [
            '#eb333b', '#1aae52'
          ],
          series: [
            {
              name: '流入流出',
              type: 'pie',
              hoverAnimation: false,
              clockwise: false,
              radius: ['90%', '76%'],
              label: {
                normal: {
                  show: false
                }
              },
              startAngle,
              data: [
                {value: val.sumIn, name: '流入'},
                {value: val.sumOut, name: '流出'}
              ]
            }
          ]
        }
        this.myChart.setOption(pieOptions);
      }
    },
    beforeDestroy () {
      echarts.dispose(this.myChart);
    }
  }
</script>
<style lang="less" scoped>
  .chart{
    height: 1.77rem;
    background-color: #fff;
    position: relative;
    .pie{
      z-index: 99;
      padding-top: .05rem;
      height: 1.335rem;
    }
    .showCenterText{
      position: absolute;
      top:0;
      bottom: .2rem;
      margin: auto 0;
      width: 100%;
      height: .5rem;
      .centerText{
        width: 33%;
        font: .12rem/1.6 PingFangSC;
        color: #555;
        &::after{
          content: '';
          display: inline-block;
          background: url("~assets/images/pieChart_dot.png") repeat-x;
          background-size: contain;
          position: absolute;
          top:40%;
          width: .25rem;
          height: 1px;
        }
        &:nth-child(1):after{
          left: .96rem;
        }
        &:nth-child(2):after{
          right: .96rem;
        }
        span{
          font: .16rem/1 Helvetica;
        }
        &.left{
          text-align: left;
          float: left;
          padding-left: .35rem;
          span:not(:last-child){
            color: #eb333b;
          }
        }
        &.right{
          float: right;
          text-align: right;
          padding-right: .35rem;
          span:not(:last-child){
            color: #1aae52;
          }
        }
      }
    }
    .pie-update-time{
      font:.12rem/.38rem PingFangSC;
      color: rgb(153,153,153);
      b{
        font-family: Helvetica;
        display: inline-block;
        min-width: .975rem;
        font-weight: normal;
        padding-left: .145rem;
      }
    }
  }
</style>
